@extends("admin.layout.main")
@section("content")

    <div id="app" >
        {{--按钮栏--}}
        <div style="margin: 3px auto;width: 900px;height: 60px;padding-top:20px">

        <span style="">
            <label for="" style="font-size: 15px;vertical-align: middle">关键词 : </label>
            <span>
                <i-input v-model="keywords"  style="width:300px;height: 35px" placeholder="可根据关键词生成文章,关键词可用英文逗号隔开"/>
            </span>

            <span><i-button type="error"    @click="generate">搜索</i-button></span>

        </span>
        </div>

        <div  style="display: flex;flex-wrap: wrap;">
            <div style="height: auto;display: flex;flex-wrap: wrap;width: 75%">
                <div style="width: 300px" v-for="m of materials" :key="m.id">
                    <p style="font-weight: bold;padding: 5px">@{{  m.title }}  <i-button @click="copyToClipboard( item.content)" type="warning">复制</i-button></p>
                    <div>
                        <div v-for="item of m.items" style="width: 280px;text-align: center;border: 1px solid darkgrey;padding: 5px">
                            <div v-if="item.type == 1">
                                @{{ item.content }}
                                <span >
                                <i-button @click="copyToClipboard( item.content)" type="warning">复制</i-button>
                            </span>
                            </div>
                            <div v-if="item.type == 2">
                                <img :src="item.content" alt="" style="width: 180px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 20%;margin-left: 15px">
                <div>
				 <span>
					<i-input v-model="word"  style="width:200px;height: 35px" placeholder="好文关键字"/>
				</span>
                    <span>
                    <i-button type="warning"    @click="getWords">搜索</i-button>
                </span>
                </div>
                <div>
                    <p v-for="word of words">
                        @{{ word }}
                        <i-button @click="copyToClipboard( item.content)" type="warning">复制</i-button>
                    </p>
                </div>
            </div>
        </div>


    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    //关键字
                    keywords:'',
                    materials:[],
                    //好文关键字
                    word:"",
                    words:[],
                };
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                //获取素材
                generate(page = 1){
                    that = this;
                    //首先获取数据资源
                    axios.get('/admin/mate/list', {
                        params: {
                            keywords:vm.keywords,
                            token:vm.token,
                            page: page,
                        }
                    }).then((response) => {
                        data = response.data;
                        if(data.code == 200){
                            that.materials = data.result.data;

                        }
                    })
                },
                /*
                * 获取好文
                * */
                getWords(){
                    that = this;
                    //首先获取数据资源
                    axios.get('/admin/mate/words', {
                        params: {
                            word:vm.word,
                            token:vm.token,
                        }
                    }).then((response) => {
                        data = response.data;
                        if(data.code == 200){
                            that.words = data.result;
                        }
                    })
                },

                copyToClipboard(content) {
                    // 创建元素用于复制
                    var aux = document.createElement("input");
                    // 设置元素内容
                    aux.setAttribute("value", content);
                    // 将元素插入页面进行调用
                    document.body.appendChild(aux);
                    // 复制内容
                    aux.select();
                    // 将内容复制到剪贴板
                    document.execCommand("copy");
                    // 删除创建元素
                    document.body.removeChild(aux);
                }
            }

        });

    </script>
@endsection